//引入：
@import"./reset.scss";

// 开启 sass 功能 : 

// 1. cmd 之中直接编写 : sass --watch ./scss/index.scss ./css/index.css 回车即可运行;

// 2. package.json 之中 scripts 选项里写入 : "scss": "sass --watch ./scss/index.scss ./css/index.css" 用  npm run scss 指令即可执行;

// 在sass之中 你用 // 注释的内容不会编译到 css文件之中;
// 但是使用 /**/ 这样的注释内容会编译到css文件之中;

/*这是一行注释*/
// 这是一行注释

//part 1:变量；

@import "./color";
@import"./size";
$color  : blue;
$height : 50px;
$width  : 150px;
.btn{
    width : $width;
    height : $height;
    background-color: $color;
    border: none;
    font-size: $height / 3;
    border-radius: 10px;
    color: darken($color,30);
}
.btn-small{
    width : $width / 2 ;
    height : $height / 2;
    background-color: $color;
    border: none;
    font-size: $height / 6;
    border-radius: 10px;
    color: darken($color,30);
}

// 变量的实战 : 
// 1. 我们会把所有的变量单独抽离成一个文件;

// 混合 mixin 

// 1. 声明的时候用 @mixin 
// 2. 调用的时候用 @include

// 把一堆css取了个名;
// @mixin rotate60 {
//       -webkit-transform: rotate(60deg);
//       -moz-transform: rotate(60deg);
//       -o-transform: rotate(60deg);
//       -ms-transform: rotate(60deg);
//       transform: rotate(60deg);   
// }

// //mixin 混合功能接受参数形式;
// @mixin rotate( $rotate ){
//       -webkit-transform: rotate($rotate );
//       -moz-transform: rotate($rotate );
//       -o-transform: rotate($rotate );
//       -ms-transform: rotate($rotate );
//       transform: rotate($rotate );   
// }

// // 批量进行参数的设置;
// @mixin transform ( $arg : scale(1.0)){
//       -webkit-transform:$arg;
//       -moz-transform: $arg;
//       -o-transform:$arg;
//       -ms-transform:$arg;
//       transform: $arg ;
// }
@import "./mixin";

.box{
    width: 100px;
    height: 100px;
    background: $color;
    margin: 20px;
    // @include rotate(80deg);
    // @include transform(rotate(70deg) scale(1.2));
    @include transform;
}

// 函数 ;

// @function nihao(){
//       @return "hello world";
// }

// .box{
//       width : nihao();
// }

// px => rem 

// 像素转换rem的函数;
@function rem( $px ){
    @return $px / $html_size * 1rem;
}

.box{
    width : rem( 300px );
}

// 继承 extend

.pox{
    @extend .box;
}
.pox{
    background: skyblue;
    @include rotate(30deg);
}

// 循环 ; 

$list : (small 30px) (middle 80px) (large 120px) (xlarge 180px);


// @for $i from 1 through 3 {
//       .item-#{$i}{
//             width : 100px;
//       }
// }

// 遍历数组的;
@each $size,$px in $list {
    .box-#{$size}{
          width :$px;
    }
}

// 压轴戏 , 嵌套结构;
.box{
    span{
          font-size: 20px;
          color: #fff;
    }

    p{
          font-size: 25px;
          color: orchid;
    }
   
    strong{
          font-size: 35px;
          color: antiquewhite;

          // 想要在包裹内部使用当前的选择器 那么使用 & 就可以了;
          &:hover{
                color: #fff;
          }
    }
}